<template>
  <div class="information">
    <div style="background-color: #fff;">
      <el-form :model="queryForm" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="客户电话:">
              <el-input v-model="queryForm.customerId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名:">
              <el-input v-model="queryForm.customerName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="论文审核状态:">
              <el-select
                v-model="queryForm.thesisStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in thesisStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button plain @click="query">查询</el-button>
            <el-button plain @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableDataed" style="width: 100%;">
      <el-table-column align="center" fixed prop="customerId" label="客户编号" width="90" />
      <el-table-column align="center" prop="customerName" label="客户姓名" width="90" />
      <el-table-column align="center" prop="thesisTitle" label="论文题目" width="100" />
      <el-table-column align="center" prop="thesisStatus" label="论文审核状态" />
      <el-table-column align="center" prop="process" label="处理说明" />
      <el-table-column align="center" prop="processDay" label="处理天数" width="80" />
      <el-table-column align="center" prop="processTime" label="处理时间" width="120" />
      <el-table-column align="center" prop="thesisUpdate" label="论文是否上传">
        <template #default="scope">
          <div v-if="scope.row.thesisUpdate==false">否</div>
          <div v-else>是</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fileName" label="客户文件"/>
      <el-table-column align="center" prop="thesisName" label="论文文件"/>
      <el-table-column align="center" prop="notes" label="客户备注" />
      <el-table-column align="center" fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button v-if="scope.row.thesisStatus=='待审核'?true:false" 
            link type="primary" size="small" @click="handleClick(scope.row, '已通过')">
            审核
          </el-button>
          <el-button v-if="scope.row.thesisStatus=='待审核'?true:false" 
            link type="primary" size="small" @click="handleClick(scope.row, '待修改')">
            驳回
          </el-button>
          <el-button link type="primary" size="small" @click="downlodeClick(scope.row)">下载论文</el-button>
          <!-- <el-button link type="primary" size="small">查看论文</el-button> -->
          <el-button link type="primary" size="small" @click="downlodesClick(scope.row)">下载客户文件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination @current-change="currentChange" :current-page="pageing.page" :page-size="pageing.size"
        :total="pageing.total" style="float: right" layout=" prev, pager, next" />
    </div>
  </div>
</template>

<script setup name="information">
import { ref, reactive, onActivated, getCurrentInstance } from 'vue'
import { thesisList,thesisStatuss, thesisDownload } from '@/api/modules/upload'
// 论文审核状态列表
const thesisStatusList = reactive([
  {
    value: '未提交',
    label: '未提交',
  },
  {
    value: '待审核',
    label: '待审核',
  },
  {
    value: '待修改',
    label: '待修改',
  },
  {
    value: '已通过',
    label: '已通过',
  },
])
// 审核事件
const handleClick = async (robj, thesisStatus) => {
  let obj = {
    thesisStatus
  }
  Object.assign(robj, obj)
  await thesisStatuss(robj)
}
// 查询表单
const queryForm = reactive({
  customerId: '',
  customerName: '',
  thesisStatus:'',
})
// el-table支持鼠标横向拖拽滚动
const { proxy } = getCurrentInstance()
const tableRef = ref()
nextTick(() => {
  if (tableRef.value) {
    proxy.$dragTable(tableRef)
  }
})
// 定义分页字段
const pageing = ref({
  total: 0,
  page: 1,
  size: 5,
})
const tableData = reactive([]);
const tableDataed = reactive([]);
// 选择第几页
const currentChange = (val) => {
  console.log("翻页，当前为第几页", val);
  tableData.length = 0;
  for (let i = 0; i < 5; i++) {
    console.log(tableDataed[(val - 1) * 5 + i]);
    if (tableDataed[(val - 1) * 5 + i]) {
      tableData.push(tableDataed[(val - 1) * 5 + i])
    }
  }
  pageing.value.page = val;
  console.log(pageing.value.total);
}
// 默认加载论文管理
onActivated(() => {
  thesisFun();
})
// 查询
const query = async() =>{
  const { data } = await thesisList({...queryForm});
  tableDataed.length=0
  Object.assign(tableDataed,data);
  pageing.value.total = data.length;
  currentChange(1)
}
// 重置
const reset = () =>{
  const obj = {
    customerId: '',
    customerName: '',
    thesisStatus:'',
  }
  Object.assign(queryForm,obj);
  thesisFun();
}
// 下载论文文件
const downlodeClick = async(user)=>{
  const data = await thesisDownload({"filePath":user.thesisPath,"fileName":user.thesisName});
}
// 下载客户文件
const downlodesClick = async(user)=>{
  const data = await thesisDownload({"filePath":user.filePath,"fileName":user.fileName});
}
// 1.执行获取审核管理列表接口
const thesisFun = async () => {
  const { data } = await thesisList();
  tableDataed.length = 0
  Object.assign(tableDataed, data);
  pageing.value.total = data.length;
  currentChange(1)
}

</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
